<!-- 商家首页 -->
<template>
	<view class="page">
		<!-- 导航栏 -->
		<CustomNavbar :scroll-top="scrollTop"></CustomNavbar>
		<!-- 滚动区域 -->
		<scroll-view class="scroll-view" scroll-y @scroll="handleScrollEvent">
			<!-- 占位 -->
			<view :style="[navbarStyle]"></view>
			<!-- 页面背景图 -->
			<PageBg></PageBg>
			<!-- 用户信息 -->
			<Userinfo></Userinfo>
			<!-- 收益 -->
			<Income></Income>
			<!-- 订单 -->
			<Order></Order>
			<!-- 功能模块 -->
			<FunctionModule></FunctionModule>
		</scroll-view>

		<!-- 底部标签栏 -->
		<c-business-tabbar class="tabbar" :index="1"></c-business-tabbar>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import CustomNavbar from "./components/custom-navbar.vue";
	import PageBg from "./components/page-bg.vue";
	import Userinfo from './components/userinfo.vue';
	import Income from './components/income.vue';
	import Order from './components/order.vue';
	import FunctionModule from './components/function-module.vue';

	// 导航栏高度
	const navbarStyle = function() {
		const statusBarHeight = getApp().globalData.statusBarHeight;
		const navBarHeight = getApp().globalData.navBarHeight;
		return { 'padding-top': statusBarHeight + 'px', 'height': navBarHeight + 'px' };
	}();

	// 滚动距离
	const scrollTop = ref(0);
	// 页面滚动事件
	const handleScrollEvent = (e) => {
		scrollTop.value = e.detail.scrollTop;
	}
</script>

<style lang="scss" scoped>
	.page {
		display: flex;
		flex-direction: column;
		height: 100vh;

		.scroll-view {
			flex-grow: 1;
			position: relative;
			z-index: 1;
			height: 0;
		}

		.tabbar {
			flex-shrink: 0;
		}
	}
</style>